<template>
  <div class="logpage">
    <ValidationObserver ref="loginForm">
      <van-nav-bar title="登陆" />
      <ValidationProvider ref="loginForm" name="手机号" rules="required" v-slot="{ errors }">
        <van-field
          v-model="uase.mobile"
          placeholder="请输入用户名"
          left-icon="flower-o"
          :error-message="errors[0]"
        />
      </ValidationProvider>
      <ValidationProvider name="验证码" rules="required|max:6" v-slot="{ errors }">
        <van-field v-model="uase.code" left-icon="service-o" placeholder="请输入短信验证码">
          <van-button
            slot="button"
            size="small"
            type="primary"
            @click="oncode"
            :error-message="errors[0]"
          >{{dodc ? '点击获取验证码' : `还剩${daojs}秒`}}</van-button>
        </van-field>
      </ValidationProvider>
    </ValidationObserver>
    <div class="logbut">
      <van-button type="info" @click="onlogin">登陆</van-button>
    </div>
  </div>
</template>

<script>
import { authorizations } from '@/api/login.js'
// import request from '@/utils/request.js'

export default {
  name: 'loginpage',
  components: {},
  props: {},
  data () {
    return {
      uase: {
        mobile: '13911111111',
        code: '246810'
      },
      dodc: true,
      daojs: 5
    }
  },
  methods: {
    async onlogin () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const isValid = await this.$refs.loginForm.validate()
      if (!isValid) {
        this.$toast({
          message: '登陆失败了',
          icon: 'fire-o'
        })
        return
      }
      try {
        const req = await authorizations(this.uase)
        console.log(req)
        this.$toast({
          message: '登陆成功了',
          icon: 'like-o'
        })
      } catch (error) {
        this.$toast({
          message: '登陆失败了',
          icon: 'fire-o'
        })
      }
      //   const req = await request({
      //     method: 'POST',
      //     url: '/app/v1_0/authorizations',
      //     data: this.uase
      //   })
      //   console.log(req)
    },
    oncode () {
      this.dodc = false
      this.daojs = 5
      this.$toast('验证码发送成功')

      let abc = setInterval(ass => {
        this.daojs--
        if (this.daojs === 0) {
          window.clearInterval(abc)
          this.dodc = true
          this.$toast('验证码为246810')
        }
      }, 500)
    }
  },
  computed: {},
  watch: {},
  created () {}
}
</script>

<style lang='less' scoped>
.logpage {
  .logbut {
    padding: 15px;
    button {
      width: 100%;
    }
  }
}
</style>
